<template>
  <el-dialog
    :title="categoryInfo ? 'Edit' : 'Insert'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="onClose"
  >
    <el-form
      ref="formEle"
      label-width="auto"
      :model="categoryForm"
      :rules="categoryFormRules"
      @submit.prevent="handleSubmit"
    >
      <el-form-item label="Name" prop="title">
        <el-input v-model="categoryForm.title"></el-input>
      </el-form-item>
      <el-form-item label="Summary" prop="intr">
        <el-input type="textarea" v-model="categoryForm.intr"></el-input>
      </el-form-item>
      <el-form-item label="Image" prop="image">
        <ImageManager v-model="categoryForm.image" />
      </el-form-item>
      <el-form-item label="Index" prop="sort">
        <el-input-number v-model="categoryForm.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="Status" prop="status">
        <el-switch :active-value="1" :inactive-value="0" v-model="categoryForm.status"></el-switch>
      </el-form-item>
      <el-form-item>
        <button hidden type="submit"></button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit" :loading="isSubmitting">Submit</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { submitArticleCategory } from '@/api/article';
import { computed, ref, nextTick, watch, } from 'vue';
import ImageManager from '@/components/image-manager/index.vue'

interface PropsType {
  categoryInfo: ArticleCategoryInfoType | null;
}

const props = defineProps<PropsType>()

const categoryForm = ref<{
  id: number | string
  title: string
  intr: string
  image: string
  sort: number | string
  status: number | string

}>({
  id: 0,
  title: "",
  intr: "",
  image: "",
  sort: 0,
  status: 1,
})

const categoryFormRules = computed(() => ({
  title: [
    { required: true, message: 'Please enter the name of the category' }
  ],
  intr: [
    { required: true, message: 'Please enter the summary of the category' }
  ],
}))

watch(
  () => props.categoryInfo,
  () => {
    new Promise<ArticleCategoryInfoType>(resolve => {
      props.categoryInfo && resolve({
        id: props.categoryInfo.id,
        title: props.categoryInfo.title,
        intr: props.categoryInfo.intr,
        image: props.categoryInfo.image,
        sort: props.categoryInfo.sort,
        status: props.categoryInfo.status,
      })
    }).then(res => {
      categoryForm.value = res
    })
  },
  {
    immediate: true
  }
)

const emits = defineEmits(['update:modelValue', 'update:categoryInfo', 'submit'])

const formEle = ref(null)
const isSubmitting = ref(false)

function handleSubmit() {
  const form = formEle.value as any

  form.validate((valid: boolean) => {
    if (valid) {
      isSubmitting.value = true
      submitArticleCategory(categoryForm.value).then(() => {
        emits('submit')
        onClose()
      }).finally(() => {
        isSubmitting.value = false
      })
    }
  })
}

function onClose() {
  const form = formEle.value as any
  form.resetFields()
  emits('update:modelValue', false)
  emits('update:categoryInfo', null)
}
</script>